import React from 'react';
import request from '../../assets/js/utils/request';
function Hoc(WithComponent) {
    return class HocComponent extends React.Component{
        formRef = React.createRef();
        constructor(props){
            super(props);
            this.state={
                isNav:true,
                //因为静态数据，所以数据临时放在hoc里面，正常在ui页面
                aNav:[
                    {
                        title:'首页',
                        url:'index',
                        bOver:false,
                        bChecked:false
                    },
                    {
                        title:'产品与服务',
                        items:[
                            {
                                title:'产品',
                                nav:[
                                    {title:'员工弹性福利',url:'benefit', bChecked:false},
                                    {title:'职工工会福利',url:'union', bChecked:false},
                                    {title:'员工节日福利',url:'nj', bChecked:false},
                                    {title:'员工午餐/交通/培训',url:'senc', bChecked:false},
                                    {title:'EAP服务',url:'eap', bChecked:false},
                                ]
                            },
                            {
                                title:'解决方案',
                                nav:[
                                    {title:'成长型企业解决方案',url:'growingup', bChecked:false},
                                    {title:'大企业平台解决方案',url:'bigbus', bChecked:false},
                                ]
                            }
                        ],
                        bOver:false,
                    },
                    {
                        title:'在线商城',
                        url:'//cardmall-online.guanaitong.com/index',
                        bOver:false,
                        bChecked:false
                    },
                    {
                        title:'咨询中心',
                        items:[
                            {title:'关爱通研究院',url:'//www.guanaitong.com/list-80-1.html?cat_id_2=81', bChecked:false},
                            {title:'企业动态',url:'//www.guanaitong.com/list-9-1.html', bChecked:false},
                            {title:'最新活动',url:'//www.guanaitong.com/list-9-1.html?cat_id_2=88', bChecked:false},
                            {title:'行业资讯',url:'//www.guanaitong.com/list-9-1.html?cat_id_2=89', bChecked:false},
                        ],
                        bOver:false,
                    },
                    {
                        title:'关于我们',
                        items:[
                            {title:'公司简介',url:'about', bChecked:false},
                            {title:'加入我们',url:'job', bChecked:false},
                        ],
                        bOver:false,
                    },
                ],
                bMask:false,
                loading:false,
                isSuccess:false,
                isDisabled:true
            }
        }
        componentDidMount(){
            this.refreshNav()
            this.indexDefaNav()
        }

        //首页默认导航
        indexDefaNav(){
            if (this.props.props.location.pathname === window.base.config.path){
                let temANav=this.state.aNav;
                for (let i in temANav){
                    temANav[i].bChecked=false;
                    temANav[0].bChecked=true;
                    for (let j in temANav[i].items){
                        temANav[i].items[j].bChecked=false;
                        for (let g in temANav[i].items[j].nav){
                            temANav[i].items[j].nav[g].bChecked=false
                        }
                    }
                }
                this.setState({aNav:temANav,isNav:true})
            }else {
                this.setState({isNav:false})
            }
            // if (this.props.props.location.pathname==='/about') {
            //     let temANav=this.state.aNav;
            //     for (let i in temANav){
            //         temANav[i].bChecked=false;
            //         for (let j in temANav[i].items){
            //             temANav[i].items[j].bChecked=false;
            //             for (let g in temANav[i].items[j].nav){
            //                 temANav[i].items[j].nav[g].bChecked=false
            //             }
            //         }
            //     }
            //     this.setState({aNav:temANav})
            //
            // }
        }
        //点击跳转页面
        goPage(e,url,a,b,c){
            e.stopPropagation()//阻止冒泡事件
            let strUrl= "^(://)" +
                "?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?" +//ftp的user@+
                "(([0-9]{1,3}.){3}[0-9]{1,3}" +// IP形式的URL- 199.194.52.184 +
                "|" +// 允许IP和DOMAIN（域名） +
                "([0-9a-z_!~*'()-]+.)*" +// 域名- www. +
                "([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]." +// 二级域名 +
                "[a-z]{0,6})" +// first level domain- .com or .museum +
                "(:[0-9]{1,4})?" +// 端口- :80 +
                "((/?)|"  +// a slash isn't required if there is no file name +
                "(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)$";
            let reg = new RegExp(strUrl);
            if (!reg.test(url)){
                window.open(url)
            }else  {
                if (url!==undefined){
                    this.props.props.history.push(window.base.config.path+url)
                }
            }
            // if (typeof  url!=='undefined'){
            //     this.props.props.history.push(window.base.config.path+url)
            // }
            this.changeDefal(a,b,c);
            localStorage['a']=a;
            localStorage['b']=b;
            localStorage['c']=c;
        }
        // 改变默认状态
        changeDefal(a,b,c){
            let temANav=this.state.aNav;
            if (a!==undefined){
                for (let i in temANav){
                    temANav[i].bChecked=false;
                    temANav[a].bChecked=true;
                }
            }
            if (b!==undefined){
                for (let j in temANav[a].items){
                    temANav[a].items[j].bChecked=false;
                    temANav[a].items[b].bChecked=true
                }
            }
            if (c!==undefined){
                for (let g in temANav[a].items[b].nav){
                    temANav[a].items[b].nav[g].bChecked=false;
                    temANav[a].items[b].nav[c].bChecked=true
                }
            }
            this.setState({aNav:temANav})
        }
        //鼠标经过导航下拉
        onMouseEnter(index){
            let temANav=this.state.aNav;
            for (let i in temANav) {
                temANav[i].bOver=false;
                temANav[index].bOver=true
            }
            this.setState({aNav:temANav})
        }
        //鼠标离开导航下拉
        onMouseLeave(index){
            let temANav=this.state.aNav;
            for (let i in temANav) {
                temANav[i].bOver=false;
                temANav[index].bOver=false
            }
            this.setState({aNav:temANav})
        }
        //刷新导航默认状态
        refreshNav(){
            let a=localStorage['a']?localStorage['a']:0,
                b=localStorage['b']?localStorage['b']:'undefined',
                c=localStorage['c']?localStorage['c']:'undefined';
            let temANav=this.state.aNav;
            if (a!=='undefined'){
                for (let i in temANav){
                    temANav[i].bChecked=false;
                    temANav[a].bChecked=true;
                }
            }
            if (b!=='undefined'){
                for (let j in temANav[a].items){
                    temANav[a].items[j].bChecked=false;
                    temANav[a].items[b].bChecked=true
                }
            }
            if (c!=='undefined'){
                for (let g in temANav[a].items[b].nav){
                    temANav[a].items[b].nav[g].bChecked=false;
                    temANav[a].items[b].nav[c].bChecked=true
                }
            }
            this.setState({aNav:temANav})
        }
        //点击显示弹窗
        changeMask(){
            this.setState({bMask:true})
        }
        //点击关闭弹窗
        closeMask(){
            this.setState({bMask:false})
        }
        //提交成功
        onFinish (values){
            this.setState({loading:true});
            let sUrl=window.base.config.baseUrl+'api/message',
                data={
                    company_name:values.company_name,
                    scale:values.company_size,
                    name:values.Xname,
                    mobile:values.phone,
                    desc:values.description,
                    link:window.location.href,
                    url:window.location.host,
                    // jobs:values.position,
                    // product:values.checkbox,
                    // email:values.email,
                    // address:address,
                    // source:messageSource // 来源BU
                };
            request(sUrl,'post',data).then((res)=>{
                if (res.code===0){
                    this.setState({loading:false,isSuccess:true});
                    setTimeout(()=>{
                        this.setState({isSuccess:false});
                        this.formRef.current.resetFields();
                    },1000)
                }
            })
            console.log('Success:', values);
        };
        //提交失败
        onFinishFailed (errorInfo){
            console.log('Failed:', errorInfo);
        };
        //改变提交按钮状态
        formOnChenge(){
            let temIsDisabled=!this.formRef.current.isFieldsTouched(['description'])
                ||!!this.formRef.current.getFieldsError().filter(({ errors }) => errors.length).length
            this.setState({isDisabled:temIsDisabled});
        }
        //页面离开时调用，页面离开时去除滚动事件解决页面切换时内存泄漏，
        componentWillUnmount(){
            this.setState=(state,callback)=>{
                return;
            }
        }
        render(){
            let newProps={
                isNav: this.state.isNav,
                aNav:this.state.aNav,
                bMask:this.state.bMask,
                loading:this.state.loading,
                isSuccess:this.state.isSuccess,
                formRef:this.formRef,
                isDisabled:this.state.isDisabled,
                onMouseEnter:this.onMouseEnter.bind(this),
                onMouseLeave:this.onMouseLeave.bind(this),
                goPage:this.goPage.bind(this),
                changeMask:this.changeMask.bind(this),
                closeMask:this.closeMask.bind(this),
                onFinish:this.onFinish.bind(this),
                onFinishFailed:this.onFinishFailed.bind(this),
                formOnChenge:this.formOnChenge.bind(this)

            }
            return(
                    <WithComponent {...this.props} {...newProps}></WithComponent>
            )
        };
        }
}
export default Hoc